@keyframes FlexInAnimationFromBottom {
    0% {
        opacity: 0.2;
        margin-top: 20px;
        margin-bottom: 0;
    }
    100% {
        opacity: 1;
        margin-top: 0;
        margin-bottom: 20px;
    }
}

.scroll-action {
    position: absolute;
    z-index: 12;
    opacity: 0;
    right: 36px;
    bottom: 12rem;
    transition: 0.25s;
    pointer-events: none;

    button {
        border-color: rgba(0, 0, 0, 0) !important;
    }

    &.active {
        opacity: 0.8;
        pointer-events: all;
    }

    @media (max-width: 668px) {
        bottom: 8.5rem;
    }
}

.message {
    display: flex;
    gap: 6px;
    flex-direction: column;
    max-width: 100%;

    pre {
        scrollbar-width: thin;

        &::-webkit-scrollbar {
            height: 6px;
        }
    }

    &:last-child {
        animation: FlexInAnimationFromBottom 0.2s
            cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s 1 normal forwards running;

        .bing {
            animation: fadein 0.2s ease-in-out;

            @keyframes fadein {
                from {
                    opacity: 0.5;
                }
                to {
                    opacity: 1;
                }
            }
        }
    }

    .content-wrapper {
        display: flex;
        flex-direction: row;
        max-width: 100%;

        .message-toolbar {
            display: flex;
            flex-direction: column;
            padding: 0 4px;
            user-select: none;
            height: max-content;
            margin-top: auto;
            gap: 4px;

            svg {
                cursor: pointer;
                color: hsl(var(--text-secondary));
                transition: 0.25s;

                &:hover {
                    color: hsl(var(--text));
                }
            }
        }
    }

    .message-quota {
        display: flex;
        flex-direction: row;
        align-items: center;
        user-select: none;
        gap: 4px;
        cursor: pointer;
        border: 1px solid hsl(var(--input));
        border-radius: var(--radius);
        transition: 0.2s linear;
        padding: 4px 8px;
        width: max-content;
        height: max-content;
        white-space: nowrap;
        margin-left: 3rem;
        transition-property: border-color, color, background-color, width;

        &.subscription {
            svg,
            span {
                color: hsl(var(--gold));
            }
        }

        .quota {
            font-size: 14px;
            color: hsl(var(--text-secondary));
            transition: 0.25s;
        }

        .icon {
            color: hsl(var(--text-secondary));
        }

        &:hover {
            border-color: hsl(var(--border-hover));
        }
    }

    .message-content {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        flex-direction: column;
        max-width: 100%;
        padding: 8px 8px;
        border-radius: var(--radius);
        transition: 0.25s linear;

        &:hover {
            border-color: hsl(var(--border-active));
        }

        .dynamic-circle {
            margin-top: 10px;
            display: inline-block;
            width: 10px; /* 设置初始宽度 */
            height: 10px;
            background-color: hsla(var(--background-dynamic-circle));
            border-radius: 50%; /* 圆形 */
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%,
            100% {
                transform: scale(1); /* 动画开始和结束时圆形保持原始大小 */
            }
            50% {
                transform: scale(1.6); /* 动画中间阶段，圆形大小增加50% */
            }
        }
    }

    .message-avatar-wrapper {
        .message-avatar {
            display: flex;
            width: 2rem;
            height: 2rem;
            border-radius: var(--radius);
            text-align: center;
            font-size: 0.785rem;
            margin-top: 2px;
        }

        flex-shrink: 0;
        margin-left: 0.5rem;
        border-radius: var(--radius);
        border: none;
        width: 2.5rem;
        height: 2.5rem;
        user-select: none;
    }

    &.user {
        align-items: flex-end;
    }

    @media (max-width: 768px) {
        .content-wrapper {
            flex-direction: column !important;
            align-items: flex-start;

            .message-avatar-wrapper {
                margin-left: 0;
                margin-right: 0;
                margin-bottom: 0.5rem;
            }
        }

        .message-toolbar {
            padding: 0 !important;
        }

        .message-quota {
            margin-left: 0;
        }

        &.user {
            .content-wrapper {
                align-items: flex-end;
            }
        }
    }

    &.user {
        .content-wrapper {
            flex-direction: row-reverse;
        }

        .message-content {
            &:hover {
                border-color: hsl(var(--border-hover));
            }
        }
    }

    &.assistant,
    &.system {
        align-items: flex-start;

        .message-content {
            &:hover {
                border-color: var(--assistant-border-hover);
            }
        }

        .message-avatar-wrapper {
            border: none;
            margin-left: 0;
        }
    }
}

.markdown-body {
    max-width: 100%;
    padding: 4px 0;
    background: none !important;
    color: hsl(var(--text));

    .prompt-row {
        border: 1px solid var(--assistant-border);
        border-radius: var(--radius);
        margin: 0.25rem 0;
        white-space: nowrap;

        .grow {
            min-width: 0.75rem;
        }

        .value {
            display: flex;
            flex-direction: row;
            align-items: center;
            font-family: var(--font-family);
            margin: 0 !important;
        }

        svg {
            transform: translateY(1px);
        }
    }

    ol,
    ul,
    menu {
        list-style: inherit;
    }

    pre,
    code {
        font-family: 'JetBrains Mono', monospace, var(--font-family) !important;
        background: rgb(40, 44, 52);
    }

    pre {
        // width: calc(100% - 8px);
        box-shadow: #0005 0 2px 2px;
        border-radius: var(--radius);

        &:before {
            content: '';
            display: block;
            background: url();
            height: 32px;
            width: 100%;
            background-size: 40px;
            background-repeat: no-repeat;
            margin-bottom: 0;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
    }

    .code-block {
        position: relative;
        overflow-x: visible !important;

        &:before {
            content: attr(lang);
            font-size: 12px;
            position: absolute;
            top: -34px;
            right: 0;
            line-height: 1;
            z-index: 1;
        }
    }

    .code-inline {
        margin: 0 2px;
    }

    pre,
    pre div {
        background: #1a1a1a !important;
    }

    img {
        background: none !important;
    }

    * {
        // text wrap
        word-wrap: anywhere;
        word-break: break-word;
    }
}

.bing {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    vertical-align: center;
    gap: 6px;
    color: #2f7eee;
    background: #e8f2ff;
    border-radius: 12px;
    padding: 6px 12px;
    font-size: 16px;
    margin: 6px 0;
    width: max-content;
    user-select: none;
    word-wrap: anywhere;
    max-width: 100%;

    svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
}
